<template>
  <div class="contentfirst">
    <div style="height: 8%;width: 100%;background:url(../../static/linx.png);">
      <div style="font-size: 32px;color: #FFFFFF;margin-left: 10%;padding-top: 16px;">旅游服务平台</div>
      <el-select v-model="value"  style="position: absolute;right: 1%;top: 30px;width: 80px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div style="height: 91%;width: 100%;display: flex;margin-top: 3px;">
      <div style="height: 100%;width: 56%;display: flex;flex-direction: column;">
        <div style="height: 60%;display: flex;">
          <div style="width: 30%;height: 100%;display: flex;flex-direction: column;">
            <dv-border-box-3 style='height: 90%;width: 80%;display: flex;flex-direction: column;padding: 10%;'>
              <div
                style="height: 30.33%;background-color: #d9523f;margin-top: 10px;display: flex;justify-content: center;align-items: center;">
                <img src="../../static/indent.png" style="width: 45px;height: 47px;" />
                <div style="display: flex;flex-direction: column;margin-left: 50px;">
                  <div style="color: #FFFFFF;font-size: 22px;">本月订单数</div>
                  <div style="color: #FFFFFF;font-size: 26px;font-weight: bold;">18000</div>
                </div>
              </div>
              <div
                style="height: 30.33%;background-color: #13d0b2;margin-top: 10px;display: flex;justify-content: center;align-items: center;">
                <img src="../../static/consumption.png" style="width: 45px;height: 47px;" />
                <div style="display: flex;flex-direction: column;margin-left: 50px;">
                  <div style="color: #FFFFFF;font-size: 22px;">本月订单数</div>
                  <div style="color: #FFFFFF;font-size: 26px;font-weight: bold;">18000</div>
                </div>
              </div>
              <div
                style="height: 30.33%;background-color: #f6a645;margin-top: 10px;display: flex;justify-content: center;align-items: center;">
                <img src="../../static/vip.png" style="width: 45px;height: 47px;" />
                <div style="display: flex;flex-direction: column;margin-left: 50px;">
                  <div style="color: #FFFFFF;font-size: 22px;">本月订单数</div>
                  <div style="color: #FFFFFF;font-size: 26px;font-weight: bold;">18000</div>
                </div>
              </div>

            </dv-border-box-3>

          </div>
          <div style="width: 70%;height: 100%;position: relative;">
            <dv-border-box-3 style='height: 70.5%;width: 80%;display: flex;flex-direction: column;padding: 10%;'>
            </dv-border-box-3>
            <div style="position: absolute;top: 30px;width: 93%;height: 88.5%;left: 30px;" id="firstChart1">

            </div>
          </div>
        </div>
        <div style="height: 40%;display: flex;">
          <div style="width: 50%;height: 100%;position: relative;">
            <dv-border-box-3 style='height: 70.5%;width: 80%;display: flex;flex-direction: column;padding: 10%;'>
            </dv-border-box-3>
            <div style="position: absolute;top: 30px;left: 30px;width: 90%;height: 85%;" id="firstChart2"></div>
          </div>
          <div style="width: 50%;height: 100%;position: relative;">
            <dv-border-box-3 style='height: 70.5%;width: 80%;display: flex;flex-direction: column;padding: 10%;'>
            </dv-border-box-3>
            <div style="position: absolute;top: 30px;left: 30px;width: 90%;height: 85%;" id="firstChart3" @click="toBigSecond()">
            </div>
          </div>
        </div>
      </div>
      <div style="height: 100%;width: 44%;" id="firstChartMap">

      </div>
    </div>
  </div>
</template>

<script>
  import "echarts/map/js/province/hunan.js";
  import obj from "echarts/map/json/province/hunan.json";
  export default {
    data() {
      return {
        firstChart1: '',
        firstChart2: '',
        firstChart3: '',
        options: [{
          value: '1',
          label: '2021'
        }, {
          value: '2',
          label: '2020'
        }],
        value: '1',
        firstChartMap:'',
         geoCoordMap: {},
         dataList: [{
             name: '长沙市',

             ll:[112.008497, 27.728136]
           },
           {
             name: '湘潭市',

             ll:[113.132855, 29.37029]
           },
           {
             name: '株洲市',

             ll:[110.479921, 29.127401]
           },
           {
             name: '衡阳市',

             ll:[109.97824, 27.550082]
           },
           {
             name: '常德市',

             ll:[109.97824, 27.550082]
           },
           {
             name: '郴州市',

             ll:[113.151737, 27.835806]
           },
           {
             name: '邵阳市',
             value: 91,
             ll:[112.355042, 28.570066]
           },
           {
             name: '娄底市',

             ll:[112.607693, 26.900358]
           },
           {
             name: '永州市',

             ll:[113.032067, 25.793589]
           },
           {
             name: '岳阳市',
             value: 631,
             ll:[111.691347, 29.040225]
           },
           {
             name: '怀化市',

             ll:[112.982279, 28.19409]
           },
           {
             name: '益阳市',

             ll:[111.391347, 29.240225]
           },
           {
             name: '张家界市',

             ll:[111.391347, 29.840225]
           },
           {
             name:'湘西土家族苗族自治州',
             ll:[111.691347, 29.040225]
           },
           {
             name: '自定义',
             ll:[111.491347, 29.140225]
           },
           {
             name: '自定义',
             ll:[111.491347, 30.2140225]
           },

           {
             name: '自定义',
             ll:[110.491347, 27.140225]
           },
           {
             name: '自定义',
             ll:[111.608019, 26.434516]
           },
         ],
        fourPieData: [{
          name: '社区总数',
          max: 3500,
          value: 1185
        }, {
          name: '村总数',
          max: 3200,
          value: 2011
        }, {
          name: '社区工作者数',
          max: 30000,
          value: 24737
        }, {
          name: '社会工作师数',
          max: 30000,
          value: 8757
        }],
        titleArr: [],
        seriesArr: [],
        option: {
          title: {
            text: '各市州全年游览人数',

            x: 'center',
            textStyle: {
              fontSize: 24,
              color: '#fff'
            }
          },
          backgroundColor: '#011c3a',
          xAxis: {
            data: ['长沙', '湘潭', '株洲', '娄底', '益阳', '常德', '郴州', '永州', '邵阳', '怀化', '衡阳', '岳阳', '湘西'],
            axisLine: {
              lineStyle: {
                color: '#3d5269'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            }
          },
          yAxis: {
            name: "单位:次",
            nameTextStyle: {
              color: '#fff',
              fontSize: 16
            },
            axisLine: {
              lineStyle: {
                color: '#3d5269'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 16
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2d3d53'
              }
            },
            interval: 500,

          },
          series: [{
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {

                offset: 0,
                color: '#5ef3ff'

              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold',
                color: '#ffffff',
                position: 'top',
              }
            },
            data: [254, 3254, 1654, 2454, 4757, 2011, 1211, 254, 3254, 1654, 2454, 4757, 2011, 1211]
          }]
        },
        option1: {

          title: {
            text: '各年龄段占比',


            target: 'blank',
            x: 'center',
            top: '10',
            textStyle: {
              color: '#FFF',
              fontSize: 16,
            }
          },

          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}%"
          },

          legend: {
            data: ['A', 'B', 'C', 'D', 'E'],
            x: 'center',
            y: '92%',
            textStyle: {
              color: '#FFF'
            }
          },

          color: ['#c2c1bd', '#00a1e5', '#23c768', '#e5ce10', '#ff7e00', '#fe0000', ],

          series: [

            {
              name: 'TIT',
              type: 'funnel',
              left: 'center',
              width: '80%',
              sort: 'ascending',
              label: {
                normal: {
                  formatter: '{b}',
                },

              },
              labelLine: {
                normal: {
                  show: true,
                  length: 30
                }
              },
              itemStyle: {
                normal: {
                  opacity: 0.3
                }
              },
              tooltip: {
                show: false
              },

              data: [{
                  value: 10,
                  name: '老年人'
                }, {
                  value: 20,
                  name: '中年人'
                },
                {
                  value: 40,
                  name: '中老年人'
                },
                {
                  value: 60,
                  name: '青年人'
                },
                {
                  value: 80,
                  name: '儿童'
                },
                {
                  value: 100,
                  name: '青少年'
                }
              ]
            },

            {
              name: 'TIT',
              type: 'funnel',
              left: 'center',
              width: '80%',
              maxSize: '80%',
              sort: 'ascending',
              label: {
                normal: {
                  position: 'inside',
                  formatter: '{c}%',
                  textStyle: {
                    color: '#fff',
                    fontSize: 14,
                  }
                },
                emphasis: {
                  position: 'inside',
                  formatter: '{b}: {c}%'
                }
              },
              itemStyle: {
                normal: {
                  opacity: 0.8,
                  borderColor: 'rgba(12, 13, 43, .9)',
                  borderWidth: 3,
                  shadowBlur: 5,
                  shadowOffsetX: 0,
                  shadowOffsetY: 5,
                  shadowColor: 'rgba(0, 0, 0, .6)'
                }
              },

              data: [{
                  value: 2,
                  name: 'A'
                }, {
                  value: 5,
                  name: 'B'
                },
                {
                  value: 12,
                  name: 'C'
                },
                {
                  value: 18,
                  name: 'D'
                },
                {
                  value: 25,
                  name: 'E'
                },
                {
                  value: 40,
                  name: 'F'
                }
              ]
            }
          ]
        }
      }
    },
    methods: {
      drawColumn() {
        this.firstChart1 = this.$echarts.init(document.getElementById('firstChart1'))

        // 绘制图表
        this.firstChart1.setOption(this.option);
      },
      drawCircle() {
        var option = {
          backgroundColor: "#00000000",
          title: this.titleArr,
          series: this.seriesArr
        }
        this.firstChart2 = this.$echarts.init(document.getElementById('firstChart2'))

        // 绘制图表
        this.firstChart2.setOption(option);
      },
      drawProportion() {
        this.firstChart3 = this.$echarts.init(document.getElementById('firstChart3'))

        // 绘制图表
        this.firstChart3.setOption(this.option1);
      },
      getData() {
        var that = this
        var colors = [
          ['#57bbf7', '#f4f4f7'],
          ['#ffc969', '#f4f4f7'],
          ['#f38b97', '#f4f4f7'],
          ['#b1d882', '#f4f4f7'],
          ['#c0acf9', '#f4f4f7']
        ]
        that.fourPieData.forEach(function(item, index) {
          that.titleArr.push({
            text: item.name,
            left: index < 2 ? index * 50 + 25 + '%' : index * 50 - 75 + '%',
            top: index < 2 ? "40%" : "90%",
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '16',
              color: colors[index][0],
              textAlign: 'center',
            },
          });
          that.seriesArr.push({
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [40, 50],
            itemStyle: {
              normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
              }
            },
            hoverAnimation: false,
            center: [index < 2 ? index * 50 + 25 + '%' : index * 50 - 75 + '%', index < 2 ? "25%" : "75%"],
            data: [{
              value: item.value,
              label: {
                normal: {
                  formatter: function(params) {
                    var unit = "";
                    if (index > 1) {
                      unit = "人"
                    } else {
                      unit = "个"
                    }
                    return params.value + unit;
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    color: colors[index][0] //跟随其他颜色
                  }
                }
              },
            }, {
              value: item.max - item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }]
          })
        });
      },
      getDataMap(){
         var that = this
         // 获取城市名称数据
         if (obj) {
           let arr = obj.features;

           console.log(arr)
           // 循环取出 城市名称和value值
           that.dataList.forEach(item => {
             var name = item.name;
             that.geoCoordMap[name] = item.ll
           })
          console.log(that.geoCoordMap)

         }
      },
      convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = this.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      },
      DrawMap() {
        let _this = this;
        let myFirstMap = this.$echarts.init(document.getElementById("firstChartMap"));

        myFirstMap.setOption({

          geo: {
            map: '湖南',
            show: false,
            roam: true,
            color:'#ff00ff',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            }
          },

          series: [{ // 地图块的相关信息
              type: 'map',
              map: '湖南',
              zoom: 1.2,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: 'rgb(0,0,0)'
                  }
                }
              },
              itemStyle: {
                normal:{
                  areaColor:'rgb(129,211,248)'
                },
                emphasis: {
                  "areaColor": "blue",
                }
              },
              data: _this.dataList
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: [40, 40],

              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: '#ff0000' // 标志颜色
                }
              },
              zlevel: 6,
              data: _this.convertData(_this.dataList)
            }


          ]
        });

      },
      toBigSecond(){
        this.$router.push({
          name: 'bigSecond',
         });
      }
    },
    mounted() {
      this.drawColumn()
      this.drawCircle()
      this.drawProportion()
      this.DrawMap()
    },
    created() {
      this.getData()
      this.getDataMap();
    }
  }
</script>

<style>
  html {
    width: 100%;
    height: 100%;
  }

  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .el-input__inner{
    background-color: #044493 !important;
    border: 1px #044493 solid;
  }
  .el-select-dropdown{
    background-color: #044493 !important;
  }
  .el-select-dropdown_item hover{
    background-color: #044493 !important;

  }

  .contentfirst {
    width: 100%;
    height: 100%;
    background-size: cover;
    background: url(../../static/true.png);
  }
</style>
